<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title data-page-title=""></title>
    <!-- font-awesome -->
    <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/fontawesome/css/font-awesome.css" rel="stylesheet">
    <!-- 蓝鲸提供的移动端公用样式库 -->
    <link href="https://magicbox.bk.tencent.com/static_api/v3/bk_mobile/css/bkui.css" rel="stylesheet">
    <!-- 引入jQuery2.0 -->
    <script src="https://magicbox.bk.tencent.com/static_api/v3/bk_mobile/assets/js/jquery-2.0.0.min.js"></script>
    <!-- 引入蓝鲸提供的公用js -->
    <script src="https://magicbox.bk.tencent.com/static_api/v3/bk_mobile/js/bkui.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/bk_mobile/assets/echart-3.3.1/echarts.min.js"></script>
</head>

<body class="bg-bright3" data-bg-color="bg-bright3">
    <section>
        <div class="bkui-tabbar bkui-fixed-tabbar bkui-tabbar-info">
            <a class="bkui-tabbar-item bkui-tabbar-active" href="javascript:void(0);">
                <div class="bkui-tabbar-icon"> <i class="fa fa-home"></i> </div>
                <p class="bkui-tabbar-label">首页</p>
            </a>
            <a class="bkui-tabbar-item" href="javascript:void(0);">
                <div class="bkui-tabbar-icon"> <i class="fa fa-list-ul"></i> </div>
                <p class="bkui-tabbar-label">会员</p>
            </a>
            <a class="bkui-tabbar-item" href="javascript:void(0);">
                <div class="bkui-tabbar-icon"> <i class="fa fa-cog"></i> </div>
                <p class="bkui-tabbar-label">订单</p>
            </a>
            <a class="bkui-tabbar-item" href="javascript:void(0);">
                <div class="bkui-tabbar-icon"> <i class="fa fa-ellipsis-h"></i> </div>
                <p class="bkui-tabbar-label">统计</p>
            </a>
        </div>
    </section>
    <section> </section>
    <section>
        <div class="bkui-section-block"> 本周业绩 </div>
        <div id="pie_1605583750395" class="chart-panel background-white"></div>
    </section>
    <script>
        function createELineChart(conf){
            var chartContainer = document.getElementById(conf.selector);
            var chart11 = echarts.init(chartContainer);
            var options = {
                title: {
                    text: conf.data.title
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: conf.data.legend
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: conf.data.xAxis
                },
                yAxis: {
                    type: 'value'
                },
                series: conf.data.series
            };
            chart11.setOption(options, true);
        }

        function initELineChart(conf){
            // 异步请求后台数据
            $.ajax({
                url: conf.url,
                type: 'GET',
                dataType: conf.dataType,
                success: function(res){
                    //获取数据成功
                    if (res.result){
                        createELineChart({
                            selector: conf.containerId, // 图表窗器
                            data: res.data // 图表数据
                        });
                    }
                }
            });
        }
    </script>
    <script>
        $(function(){
            initELineChart({
                url: 'https://magicbox.bk.tencent.com/static_api/v3/mobile_components/chart_line1/demo.json',
                dataType: 'json',
                containerId: 'pie_1605583750395'
            });
        });
    </script>
</body>

</html>